package com.chatty.compose.ui.components

import androidx.compose.animation.AnimatedContent
import androidx.compose.animation.Crossfade
import androidx.compose.animation.ExperimentalAnimationApi
import androidx.compose.animation.animateColorAsState
import androidx.compose.animation.core.LinearEasing
import androidx.compose.animation.core.tween
import androidx.compose.animation.fadeIn
import androidx.compose.animation.fadeOut
import androidx.compose.animation.scaleIn
import androidx.compose.animation.scaleOut
import androidx.compose.animation.with
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.material.Button
import androidx.compose.material.Icon
import androidx.compose.material.IconButton
import androidx.compose.material.Text
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.material.icons.filled.FavoriteBorder
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

@Composable
fun ComplexCrossfadeExample() {
    var currentContent by remember { mutableStateOf("Content 1") }
    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(16.dp),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    ) {
        // 使用 Crossfade 切换复杂内容
        Crossfade(targetState = currentContent) { content ->
            when (content) {
                "Content 1" -> {
                    Column(
                        horizontalAlignment = Alignment.CenterHorizontally
                    ) {
                        Text(text = "This is Content 1", fontSize = 24.sp)
                        Spacer(modifier = Modifier.height(8.dp))
                        Button(onClick = { /* TODO */ }) {
                            Text("Button 1")
                        }
                    }
                }
                "Content 2" -> {
                    Box(
                        modifier = Modifier
                            .background(Color.LightGray)
                            .padding(16.dp)
                    ) {
                        Text(text = "This is Content 2", fontSize = 24.sp)
                    }
                }
            }
        }

        Spacer(modifier = Modifier.height(16.dp))

        // 切换按钮
        Button(onClick = {
            currentContent = if (currentContent == "Content 1") "Content 2" else "Content 1"
        }) {
            Text("Switch Content")
        }
    }
}


@Composable
fun CustomDurationCrossfadeExample() {
    var currentPage by remember { mutableStateOf("Page 1") }

    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(16.dp),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    ) {
        // 使用 Crossfade 并自定义动画时长
        Crossfade(
            targetState = currentPage,
            animationSpec =

                    tween(
                        durationMillis = 2000, // 动画时长
                        delayMillis = 200,    // 延迟
                        easing = LinearEasing  // 缓动曲线
                    )// 动画时长为 1 秒
        ) { page ->
            when (page) {
                "Page 1" -> Text(text = "This is Page 1", fontSize = 24.sp)
                "Page 2" ->
                    // Row
                    Column(
                        modifier = Modifier
                            .fillMaxSize()
                            .background(Color.LightGray),
                        horizontalAlignment = Alignment.CenterHorizontally
                    ) {
                        Text(text = "This is Page 2", fontSize = 24.sp)
                        Spacer(modifier = Modifier.height(8.dp))
                        Button(onClick = {// 返回
                            currentPage = "Page 1"
                             }) {
                            Text("Button 1")
                        }
                    }

            }
        }

        Spacer(modifier = Modifier.height(16.dp))

        // 切换按钮
        Button(onClick = {
            currentPage = if (currentPage == "Page 1") "Page 2" else "Page 1"
        }) {
            Text("Switch Page")
        }
    }
}



@OptIn(ExperimentalAnimationApi::class)
@Composable
fun AnimatedContentExample() {
    var currentPage by remember { mutableStateOf("Page 1") }

    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(16.dp),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    ) {
        // 使用 AnimatedContent 实现复杂动画
        AnimatedContent(
            targetState = currentPage,
            transitionSpec = {
                fadeIn(animationSpec = tween(2000)) with
                        fadeOut(animationSpec = tween(1000))
            }
        ) { page ->
            when (page) {
                "Page 1" -> Text(text = "This is Page 1", fontSize = 24.sp)
                "Page 2" -> Text(text = "This is Page 2", fontSize = 24.sp)
            }
        }

        Spacer(modifier = Modifier.height(16.dp))

        // 切换按钮
        Button(onClick = {
            currentPage = if (currentPage == "Page 1") "Page 2" else "Page 1"
        }) {
            Text("Switch Page")
        }
    }
}

@Preview
@Composable
fun ComplexCrossfadeExamplePreview() {
  //CustomDurationCrossfadeExample()
    //AnimatedContentExample()
    FavoriteButtonWithAnimatedContent()
}


@OptIn(ExperimentalAnimationApi::class)
@Composable
fun FavoriteButtonWithAnimatedContent() {
    var isFavorited by remember { mutableStateOf(false) }
    val iconColor by animateColorAsState(
        targetValue = if (isFavorited) Color.Red else Color.Gray,
        animationSpec = tween(durationMillis = 300)
    )

    IconButton(
        onClick = { isFavorited = !isFavorited },
        modifier = Modifier.size(48.dp)
    ) {
        AnimatedContent(
            targetState = isFavorited,
            transitionSpec = {
                // 定义进入和退出动画
                (scaleIn(animationSpec = tween(300)) + fadeIn() with
                        (scaleOut(animationSpec = tween(300)) + fadeOut()))
            }
        ) { favorited ->
            val icon = if (favorited) {
                Icons.Default.Favorite
            } else {
                Icons.Default.FavoriteBorder
            }
            Icon(
                imageVector = icon,
                contentDescription = if (favorited) "Favorited" else "Not Favorited",
                tint = iconColor, // 应用颜色动画
                modifier = Modifier.size(32.dp)
            )
        }
    }
}
